<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>课程-资源</title>

<%@ include file="/common/commonLib.jsp"%>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/courseResource.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
<script src="<c:url value='/js/course-index.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<c:url value='/js/courseResource.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<c:url value='/teapage/finalExam/js/jquery.min.js'/>"></script>
<script src="<c:url value='/js/ajaxfileupload.js'/>"></script>

</head>
<body>
	<div class="container-fluid main">
		<div class="row">
			<div class="col-md-12">
				<%@include file="/common/header.jsp"%>
			</div>
			<div class="col-md-12">
				<%@include file="common/courseHeader.jsp"%>
			</div>
			<div class="col-md-3">
				<%@include file="common/courseLeft.jsp"%>
			</div>
			<div class="col-md-9">
				<%@include file="common/courseNavbar.jsp"%>
			</div>
			<div class="col-md-9">
				<!-- 资源首页 -->
				<div class="resource-index">
					<div class="row">
						<div class="col-md-12" style="text-align:right;">
							<input type="button" id="upload-new-resource-btn" class="btn btn-primary" value="上传资源" style="margin-right:2rem;box-shadow: 3px 3px 3px #80b3e0;">
						</div>
					</div>
					<div class="row">
						<!--资源列表 -->
						<div class="col-md-12">
							<table class="table">
								<thead>
									<tr>
										<th>资源名</th>
										<th>上传者</th>
										<th>上传时间</th>
										<th>
											<select onchange="search()" class="form-control" id="searchIsQuate">
												<option value="ALL" selected = "selected">全部</option>
												<option value="YES">已发布</option>
												<option value="NO">未发布</option>										
											</select>
										</th>
									</tr>
								</thead>
								<tbody id="resourceList">
								
								</tbody>
							</table>
						</div>
						<!-- 分页 -->
						<div class="col-md-12">
							<div class="page-content" id="courseResourcePage">
								<nav class="pagination" role="navigation">
									<a class="last-page" href="#">
										<i class="fa fa-angle-left"></i>
									</a>
									<span class="page-number">...</span>
									<a class="next-page" href="#">
										<i class="fa fa-angle-right"></i>
									</a>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>	
	
	<!-- 上传资源 -->
	<div class="row" id="upload-new-resource-layer" style="display:none;">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<div class="row">
				<div class="col-md-12">
					<!-- 添加资源 -->
					<div class="row">
						<div class="col-md-12" style="text-align:center;margin-top:1rem;">
							<h3>资源文件</h3>
						</div>
						<div class="col-md-12" style="margin-top:1rem;">
							<div class="row">
								<div class="col-xs-6">
									<div id="upload-box">
										<div class="col-xs-12">
											<img src="<c:url value='/image/upload-file.png'/>">
										</div>
										<div class="col-xs-12">
											<h4>Click on this box</h4><h5>or</h5>
										</div>
										<div class="col-xs-12">
											<input type="button" id="choose-file-btn" value="选择文件">
										</div>
									</div>
								</div>
								<div class="col-xs-6" style="text-align:center;">
									<!-- 文件列表 -->
									<ul id="resource-file-list">
										
									</ul>
								</div>
							</div>
						</div>
						<div class="col-md-12" style="text-align:center;display:none;">
							<input type="file" id="resource-file" name="file" onchange="resourceFileList()" />
						</div>
						
					</div>
				</div>
				<div class="col-md-12" style="margin-top:5rem;text-align:center;margin-bottom:4rem;">
					<input type="button" id="resource-upload-btn" onclick="uploadFile()" class="btn btn-success" value="上传资源" >
				</div>
			</div>
		</div>
		<div class="col-md-1"></div>
	</div>	
	
	<%@include file="/common/footer.jsp"%>
</body>
<script>
var data=${data};
$(document).ready(function() {
	if (data.status != "success") {
		alert(data.message);
		return;
	}
	$("#resource").css("color","#00b43c");
	fetchCourse(data.data.courseId);
	initTable(data.data);
	changeUrl(data.data.courseId);
	
	$("#upload-box").click(function() {
		$("#resource-file").click();
	});
})

var initTable = function(data){
	var resourceList =$("#resourceList");
	resourceList.empty();
	var list=data.list;
	if(list.length <= 0){
		var s = "<tr><td colspan=\"4\">无资源记录</td></tr>";
		resourceList.append(s);
		$("#courseResourcePage").hide();
	}else {
		$("#courseResourcePage").show();
		for(var i=0;i<list.length;i++){
			var item =list[i];
			var s="<tr onclick=\"toPublishList("+item.id+")\">";
			s+="<td title=\""+item.fileName+"\">"+item.fileName+"</td>";
			s+="<td title=\""+item.uploaderName+"\">"+item.uploaderName+"</td>";
			s+="<td title=\""+item.uploadTime+"\">"+item.uploadTime+"</td>";
			if(item.isQuote=="YES"){
				s+="<td title=\"已发布\">已发布</td>";
			}else{
				s+="<td title=\"未发布\">未发布</td>";
			}
			s+="</tr>"
			resourceList.append(s);
		}	}
	
	initPages(data.pageNo,data.allpages);
}

var toPublishList = function(id){
	window.location.href="<c:url value='/lessonResource/listData?id="+id+"'/>";
}

var uploadFile = function(){
	var attachKey=$("input[name='attachKey']");
	var keys=[];
	if(attachKey.length<=0){
		alert("请添加文件");
		return ;
	}
	for(var i=0;i<attachKey.length;i++){
		keys.push($(attachKey[i]).val());
	}
	if(keys.length<=0){
		alert("请添加文件");
		return ;
	}
	var json={
			courseId:data.data.courseId,
			keys:keys
	};
	$.post(CONTEXT_PATH+"respository/ajaxBatchCreate", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			window.location.reload();
		}else{
			alert(data.message);
		}
	});
}

var search = function(){
	var courseId= ${param.courseId}
	var isQuote=$("#searchIsQuate  option:selected").val();
	var json={
			courseId:courseId
	};
	if(isQuote!="ALL"){
		json.isQuote=isQuote;
	}
	getResource(json);
}

var getResource = function(json){
	$.get(CONTEXT_PATH+"respository/ajaxListData", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			initTable(data.data);
		}else{
			alert(data.message);
		}
	});
}

var initPages = function(pageNo,allpages){
	
	 var lastPageObj=$("#courseResourcePage .last-page");
		var nextPageObj=$("#courseResourcePage .next-page");
		var pageNumberObj=$("#courseResourcePage .page-number");
		var lastPage=pageNo-1;
		if(lastPage<=0){//设置disableed
			lastPage=1;
		}else{
			 $("#courseResourcePage .last-page").bind("click",{pageNo:lastPage},getPage);
		};
		var nextPage = pageNo+1;
		if(nextPage>allpages){
			nextPage=allpages;
		}else{
			 $("#courseResourcePage .next-page").bind("click",{pageNo:nextPage}, getPage);
		}
		
		/* 需要进一步改进上下 */
		if(allpages <= 1){
			$("#courseResourcePage").hide();
		}else{
			pageNumberObj.text("第"+pageNo+"页/共"+allpages+"页");
			$("#courseResourcePage").show();
		}
		
}

var getPage = function(event){
	var courseId= ${param.courseId}
	var isQuote=$("#searchIsQuate  option:selected").val();
	var json={
			courseId:courseId
	};
	if(isQuote!="ALL"){
		json.isQuote=isQuote;
	}
	json.pageNo=event.data.pageNo;
	getResource(json);
}

</script>
</html>